.halo {
   position: absolute;
   pointer-events: none;
}

.halo > div {
   position: absolute;
   pointer-events: auto;
   width: 20px;
   height: 20px;
   background-size: 20px 20px;
   background-repeat: no-repeat;
   -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.halo.animate > div {
   transition: background-size 80ms, width 80ms, height 80ms, top 150ms, left 150ms, bottom 150ms, right 150ms;
}

.halo.small > div {
   width: 15px;
   height: 15px;
   background-size: 15px 15px;
}

.halo.tiny > div {
   width: 10px;
   height: 10px;
   background-size: 10px 10px;
}

.halo .resize {
   bottom: -25px;
   right: -25px;
   cursor: se-resize;
   background-image: url("images/resize.png");
}

.halo.small .resize {
   bottom: -19px;
   right: -19px;
}

.halo.tiny .resize {
   bottom: -13px;
   right: -13px;
}

.halo .remove {
   top: -21px;
   left: -25px;
   cursor: pointer;
   background-image: url("images/remove.png");
}

.halo.small .remove {
   top: -19px;
   left: -19px;
}

.halo.tiny .remove {
   top: -13px;
   left: -13px;
}

.halo .clone {
   top: -22px;
   left: 50%;
   margin-left: -10px;
   cursor: move;
   background-image: url("images/clone.png");
}

.halo.small .clone {
   top: -19px;
   margin-left: -7.5px;
}

.halo.tiny .clone {
   top: -13px;
   margin-left: -5px;
}

.halo .link {
   right: -25px;
   top: -webkit-calc(50% - 10px);
   top: calc(50% - 10px);
   cursor: move;
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
   background-image: url("images/link.png");
}

.halo.small .link {
   right: -19px;
   top: -webkit-calc(50% - 8px);
   top: calc(50% - 8px);
}

.halo.tiny .link {
   right: -13px;
   top: -webkit-calc(50% - 5px);
   top: calc(50% - 5px);
}

.halo .fork {
   top: -21px;
   right: -25px;
   cursor: move;
   background-image: url("images/fork.png");
}

.halo.small .fork {
   top: -19px;
   right: -19px;
}

.halo.tiny .fork {
   top: -13px;
   right: -13px;
}

.halo .unlink {
   left: -25px;
   top: 50%;
   margin-top: -10px;
   cursor: pointer;
   background-image: url("images/unlink.png");
}

.halo.small .unlink {
   left: -19px;
   margin-top: -8px;
}

.halo.tiny .unlink {
   left: -13px;
   margin-top: -5px;
}

.halo .rotate {
   bottom: -25px;
   left: -25px;
   cursor: move;
   background-image: url("images/rotate.png");
}

.halo.small .rotate {
   bottom: -19px;
   left: -19px;
}

.halo.tiny .rotate {
   bottom: -13px;
   left: -13px;
}

.halo .box {
   position: absolute;
   top: 100%;
   margin-top: 30px;
   left: -20px;
   right: -20px;
   text-align: center;
   color: white;
   font-size: 10px;
   line-height: 14px;
   background-color: #1ABC9C;
   border-radius: 6px;
   padding: 6px;
}

.halo.small .box {
   margin-top: 25px;
}

.halo.tiny .box {
   margin-top: 20px;
}

.halo .link.halo-magnet {
    opacity: 0.1;
    transition: none;
    /* halo magnets deprecated */
    display: none;
}

.halo .link.halo-magnet:hover {
    opacity: 1;
}